<template>
  <el-dialog title="导入参数" v-model="dialogVisible" width="40%">
    <div class="params-box">
      <el-form ref="ruleFormRef" :model="form" label-width="auto" :rules="rules">
        <el-form-item label="参数方案名称：" prop="pmName" v-if="showItem">
          <el-row :gutter="20">
            <el-col :span="16"> <el-input placeholder="请输入" v-model="form.pmName" /></el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="产流参数：" prop="clPmUrl">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input placeholder="请输入" v-model="form.clPmUrl" :disabled="true"
            /></el-col>
            <el-col :span="8">
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo left-spacing"
                action="#"
                multiple
                :http-request="(params) => handleUploadFile(params, 'clPmUrl')"
                :show-file-list="false"
              >
                <el-button type="primary" icon="Upload">导入</el-button>
              </el-upload></el-col
            >
          </el-row>
        </el-form-item>
        <el-form-item label="单元出口到预报断面汇流参数：" prop="unitHlPmUrl">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input placeholder="请输入" v-model="form.unitHlPmUrl" :disabled="true"
            /></el-col>
            <el-col :span="8">
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo left-spacing"
                action="#"
                multiple
                :http-request="(params) => handleUploadFile(params, 'unitHlPmUrl')"
                :show-file-list="false"
              >
                <el-button type="primary" icon="Upload">导入</el-button>
              </el-upload></el-col
            >
          </el-row>
        </el-form-item>
        <el-form-item label="河道演进参数：" prop="rivlHlPmUrl">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input placeholder="请输入" v-model="form.rivlHlPmUrl" :disabled="true"
            /></el-col>
            <el-col :span="8">
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo left-spacing"
                action="#"
                multiple
                :http-request="(params) => handleUploadFile(params, 'rivlHlPmUrl')"
                :show-file-list="false"
              >
                <el-button type="primary" icon="Upload">导入</el-button>
              </el-upload></el-col
            >
          </el-row>
        </el-form-item>
        <el-form-item label="入流站到预报断面汇流参数：" prop="inHlPmUrl">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input placeholder="请输入" v-model="form.inHlPmUrl" :disabled="true"
            /></el-col>
            <el-col :span="8">
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo left-spacing"
                action="#"
                multiple
                :http-request="(params) => handleUploadFile(params, 'inHlPmUrl')"
                :show-file-list="false"
              >
                <el-button type="primary" icon="Upload">导入</el-button>
              </el-upload></el-col
            >
          </el-row>
        </el-form-item>
        <el-form-item label="初始土壤含水量：" prop="moistPmUrl">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input placeholder="请输入" v-model="form.moistPmUrl" :disabled="true"
            /></el-col>
            <el-col :span="8">
              <el-upload
                v-model:file-list="fileList"
                class="upload-demo left-spacing"
                action="#"
                multiple
                :http-request="(params) => handleUploadFile(params, 'moistPmUrl')"
                :show-file-list="false"
              >
                <el-button type="primary" icon="Upload">导入</el-button>
              </el-upload></el-col
            >
          </el-row>
        </el-form-item>
        <el-form-item label="备注：" prop="back" v-if="showItem">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input placeholder="请输入" v-model="form.back" type="textarea"
            /></el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSaveParamsInfo()">保存</el-button>
        <el-button @click="closeDialog()">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose } from 'vue'
import { uploadXajParamsFile, uploadXajParamsSave } from '@/services/modules/model-config'
const dialogVisible = ref(false)
const ruleFormRef = ref(null)
/** 文件列表 */
const fileList = ref([])
const form = ref({
  pmName: '',
  // 产流
  clPmUrl: '',
  // 单元出口到断面出口汇流参数值：
  unitHlPmUrl: '',
  // 河网汇流参数值
  rivlHlPmUrl: '',
  // 入流到出口汇流参数值：
  inHlPmUrl: '',
  // 初始土壤含水量：
  moistPmUrl: '',
  back: ''
})
const showItem = ref(true)
const rules = {
  pmName: [{ required: true, message: '请输入名称', trigger: 'blur' }]
}
const emit = defineEmits(['afterClosing'])
// 上传文件
const handleUploadFile = async (params, val) => {
  let { file } = params
  let formData = new FormData()
  formData.append('file', file)
  let res = await uploadXajParamsFile(formData)
  if (res.code == 200) {
    ElMessage({
      type: 'success',
      message: res.msg
    })
    res.data.url
    // 上传文件成功 得到url 分配值
    switch (val) {
      case 'clPmUrl':
        form.value.clPmUrl = res.data.url
        break
      case 'unitHlPmUrl':
        form.value.unitHlPmUrl = res.data.url
        break
      case 'rivlHlPmUrl':
        form.value.rivlHlPmUrl = res.data.url
        break
      case 'inHlPmUrl':
        form.value.inHlPmUrl = res.data.url
        break
      case 'moistPmUrl':
        form.value.moistPmUrl = res.data.url
        break

      default:
        break
    }
  } else {
    ElMessage({
      type: 'error',
      message: res.msg
    })
  }
}
const closeDialog = () => {
  dialogVisible.value = false
  emit('afterClosing')
}
// 保存
const handleSaveParamsInfo = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      const res = await uploadXajParamsSave(form.value)
      if (res.code === 200) {
        ElMessage.success('保存成功')
        closeDialog()
      } else {
        ElMessage({
          type: 'error',
          message: res.msg
        })
      }
    }
  })
}
// 打开弹框 formScid方案id
function handleOpenModal(val, mid) {
  dialogVisible.value = true
  // 新建时 清除脏数据
  Object.keys(form.value).forEach((key) => {
    form.value[key] = ''
  })
  // 判断是是否单个导入
  val == 1 ? (showItem.value = true) : (showItem.value = false)
  form.value.mid = mid
}
defineExpose({ handleOpenModal })
</script>

<style lang="less" scoped>
.params-box {
  height: 350px;
  :deep(.el-row) {
    display: flex;
    align-items: center;
    width: 100%;
  }
}
</style>
